<template>
    <view class="submit-order-container pl">
        <div class="submitOrder">
            <!-- <div class="info">
                <div class="order-msg">
                    <div class="msg1">
                        <span v-if="formData.rankType && formData.sparringType == '场次' | formData.sparringType == '定位赛' | formData.sparringType == '女神陪练'">{{
                            formData.rankType
                        }}</span>
                        <span v-if="formData.beforeLevel && formData.sparringType == '定位赛'">{{ formData.beforeLevel
                            }}</span>
                        <span v-if="formData.needGames && formData.sparringType == '定位赛'">定位赛{{ formData.needGames
                            }}</span>
                        <span v-if="formData.session && formData.sparringType == '场次'">{{ formData.session }}</span>
                        <span v-if="formData.duration && formData.sparringType == '女神陪练'">{{ formData.duration }}</span>
                       
                        <span v-if="formData.currentTask && formData.sparringType == '场次' | formData.sparringType == '女神陪练'">{{ formData.currentTask }}</span>
                    </div>
                    <div class="msg2">
                        <span v-if="formData.mingwenLevel && formData.heroCount">铭文{{ formData.mingwenLevel }}级 英雄数量{{
                            formData.heroCount }}个</span>
                        <span v-else-if="formData.mingwenLevel">铭文{{ formData.mingwenLevel }}级</span>
                    </div>
                </div>
                <div class="preferred-price">
                    <div class="title">建议价</div>
                    <div class="price">
                        <span>{{ price }}</span> 元
                    </div>
                    <div class="time">{{ time }}小时</div>
                    <div class="tip">预计1分钟内被接手，高级陪练员为您服务，胜率更高</div>
                    <image @click="showPricePicker" src="../../../../static/icons/edit.png"></image>
                </div>
            </div> -->
            <!-- <div class="login-mode">
                <div class="tab">账号密码登录</div>
                <div class="username">
                    <div class="label">游戏角色</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入您的游戏角色名">

                    </div>
                </div>
                <div class="phone">
                    <div class="label">号主手机（必填）</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入您的手机号">
                    </div>
                </div>
                <div class="phone">
                    <div class="label">游戏角色</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入您的游戏角色名">
                    </div>
                </div>
                <div class="contact">
                    <div class="label">发单者联系方式（必填）</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入发单者的联系方式">
                    </div>
                </div>
            </div> -->
            <div class="login-mode">
                <div class="tab">陪练任务</div>
                <input style="text-align: left;" type="text" placeholder="请输入订单任务，最多50个字符" v-model="taskDescription">
            </div>
            <div class="login-mode">
                <div class="tab">发单信息</div>
                <div class="username">
                    <div class="label">订单价格</div>
                    <div class="handle">
                        <input type="number" placeholder="请输入金额" v-model="price">
                    </div>
                    元
                </div>
                <div class="phone">
                    <div class="label">陪练时限</div>
                    <div class="handle">
                        <input type="number" placeholder="要求时间" v-model="time">
                    </div>
                    小时
                </div>
            </div>
            <div class="login-mode">
                <div class="tab">陪练信息</div>
                <div class="username">
                    <div class="label">游戏角色名</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入游戏昵称" v-model="gameRole">
                    </div>
                </div>
                <div class="phone">
                    <div class="label">号主手机（必填）</div>
                    <div class="handle">
                        <input type="number" placeholder="请输入您的手机号" v-model="ownerPhone">
                    </div>
                </div>
            </div>
            <!-- <div class="point-hero" v-if="formData.mode != '宝典'">
                <div class="label">指定英雄（加价30%）</div>
                <div class="handle" @click="showHeroPicker">
                    <view class="selected-tag">
                        {{ hero || '请选择指定英雄' }}
                        <image src="../../../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div> -->
            <div class="special-task">
                <div class="label">特殊要求</div>
                <div class="handle" @click="showSpecialPicker">
                    <view class="selected-tag">
                        {{ '保证金/订单要求等' }}
                        <image src="../../../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <div class="footer">
                <div class="button" @click="submitOrder">发布订单</div>
            </div>
        </div>
        <!-- 优选价弹窗 -->
        <uni-popup ref="pricePopup" type="bottom">
            <view class="popup-content">
                <view>
                    <div class="level">
                        <span>价格（元）</span>
                        <input type="number" placeholder="请输入价格" v-model="price">
                    </div>
                    <div class="role">
                        <span>时限（小时）</span>
                        <input type="number" placeholder="请输入时限" v-model="time">
                    </div>
                </view>
                <view class="popup-footer2">
                    <span class="cancel" @click="hidePricePicker">取消</span>
                    <span class="confirm" @click="confirmPricePicker">确认</span>
                </view>
            </view>
        </uni-popup>
        <!-- 指定英雄弹窗 -->
        <uni-popup ref="heroPopup" type="bottom">
            <view class="popup-content">
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in heroTree" :key="index" class="popup-item" @click="selectHeroItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideHeroPicker">取消
                </view>
            </view>
        </uni-popup>
        <!-- 特殊要求弹窗 -->
        <uni-popup ref="specialPopup" type="bottom">
            <view class="popup-content">
                <div class="title">特殊要求</div>
                <div class="server">
                    <div class="server-title">
                        服务保障
                    </div>
                    <div class="server-content">
                        <div class="server-content-item">
                            <div class="server-content-item-text">安全保证金</div>
                            <div class="server-content-item-value">
                                <input type="number" v-model="securityDeposit">
                            </div>
                            <div class="server-content-item-unit">元</div>
                        </div>
                        <div class="server-content-item">
                            <div class="server-content-item-text">效率保证金</div>
                            <div class="server-content-item-value">
                                <input type="number" v-model="efficiencyDeposit">
                            </div>
                            <div class="server-content-item-unit">元</div>
                        </div>
                    </div>
                </div>
                <div class="order-require">
                    <div class="order-require-title">订单要求</div>
                    <!-- 段位-订单要求 -->
                    <scroll-view scroll-y class="order-require-content">
                        <div class="order-require-content-item">接单者须有实力带动号主。
                        </div>
                        <div class="order-require-content-item">陪练单接单者禁止出现拉私单及引导私下交易转账行为，违者发单者可申请撤单追究赔付及处罚!!!
                        </div>
                        <div class="order-require-content-item">1.接单须5分钟内加号主好友并尽快进行陪练(号主原因除外)，接单后联系不上号主及时提交异常
                        </div>
                        <div class="order-require-content-item">2.陪练前上传首图(上传好友排行榜截图，截图内需有号主昵称)，完单后上传完单截图(上传好友排行榜截图，截图内需有号主昵称)
                        </div>
                        <div class="order-require-content-item">3.陪练时间配合号主时间
                        </div>
                        <div class="order-require-content-item">4.陪练期间注意服务态度，禁止辱骂号主及队友
                        </div>
                        <div class="order-require-content-item">5.禁止陪练期间要求号主打不想玩的位置/英雄6.段位陪练订单支持以净胜场数结算
                        </div>
                        <div class="order-require-content-item">6.需自备账号
                        </div>
                    </scroll-view>
                </div>
                <!-- <div class="special-require" v-if="formData.mode != '宝典'">
                    <div class="special-require-title">订单要求</div>

                    <div class="special-require-content" v-if="formData.mode == '排位赛'">
                        <checkbox color="#57b1ff"></checkbox>
                        <span style="display: flex;align-items: center;">包补分 <i
                                style="color: #aaa;margin-left: 20rpx;">加价50%</i></span>
                    </div>
                    <div class="special-require-content">
                        <checkbox color="#57b1ff"></checkbox>
                        <span style="display: flex;align-items: center;">裁决之镰 <i
                                style="color: #aaa;margin-left: 20rpx;">加12小时</i></span>
                    </div>

                </div> -->
                <view class="popup-footer" @click="hideSpecialPicker">确定
                </view>
            </view>
        </uni-popup>
    </view>
</template>
<script>
// import { createOrder, checkText, getUserInfo } from '@/config/api'; // API 导入 (假设)

export default {
  components: {
      // PL 版本目前没有显式使用子组件 (除了 uni-popup)
  },
  data() {
    return {
      // 从路由接收的表单数据 (保留结构以防万一)
      formData: {
        server: '',
        sparringType: '', // PL 特有类型? (来自原注释)
        // ... 其他可能从路由接收的 PL 相关字段
        suggestedPrice: null, // 可能用于初始化 price
        estimatedTime: null,  // 可能用于初始化 time
      },
      // 表单输入绑定
      taskDescription: '',
      price: '', // 初始值可根据业务逻辑设置或来自 formData
      time: '',  // 初始值可根据业务逻辑设置或来自 formData
      gameRole: '',
      ownerPhone: '',
      // 特殊要求
      securityDeposit: 5,
      efficiencyDeposit: 5,
    };
  },
  onLoad(options) {
    if (options.formData) {
      try {
        const parsedData = JSON.parse(decodeURIComponent(options.formData));
        this.formData = { ...this.formData, ...parsedData };
        console.log("Received formData (WWQY PL):", this.formData);
        // 如果路由传递了建议价格/时间，用它们初始化本地 price/time
        this.price = this.formData.suggestedPrice || ''; // 如果没有建议价则为空
        this.time = this.formData.estimatedTime || '';   // 如果没有建议时间则为空
      } catch (e) {
        console.error("Failed to parse formData (WWQY PL):", e);
        uni.showToast({ title: '加载订单信息失败', icon: 'none' });
      }
    } else {
      console.warn("No formData found in route params (WWQY PL).");
    }
    // 可选：预填联系方式（如果PL需要）
    // this.prefillContactInfo();
  },
  methods: {
    // --- 弹窗方法 (复用 DL) ---
    showPopup(refName) {
        if (this.$refs[refName]) {
            this.$refs[refName].open();
        } else {
             console.error(`Popup ref '${refName}' not found or not ready.`);
             uni.showToast({ title: '组件加载中', icon: 'none' });
        }
    },
    hidePopup(refName) {
         if (this.$refs[refName]) {
            this.$refs[refName].close();
        } else {
             console.error(`Popup ref '${refName}' not found or not ready.`);
        }
    },

    // 特殊要求弹窗
    showSpecialPicker() {
      this.showPopup('specialPopup');
    },
    hideSpecialPicker() {
      // 数据通过 v-model 绑定, 只关闭弹窗
      this.hidePopup('specialPopup');
    },

    // --- 表单校验 (PL 版本) ---
    validateForm() {
        if (!this.taskDescription) { uni.showToast({ title: '请输入陪练任务', icon: 'none' }); return false; }
        if (this.taskDescription.length > 50) { uni.showToast({ title: '任务描述最多50字', icon: 'none' }); return false; }
        if (!this.price || isNaN(Number(this.price)) || Number(this.price) <= 0) {
            uni.showToast({ title: '请输入有效订单价格', icon: 'none' }); return false;
        }
        if (!this.time || isNaN(Number(this.time)) || Number(this.time) <= 0) {
            uni.showToast({ title: '请输入有效陪练时限', icon: 'none' }); return false;
        }
        if (!this.gameRole) { uni.showToast({ title: '请输入游戏角色名', icon: 'none' }); return false; }
        if (!this.ownerPhone) { uni.showToast({ title: '请输入号主手机', icon: 'none' }); return false; }
        if (!/^1[3-9]\d{9}$/.test(this.ownerPhone)) {
            uni.showToast({ title: '请输入正确的手机号', icon: 'none' }); return false;
        }
        return true;
    },

    // --- 内容安全检查 (占位符) ---
    async checkContent() {
        const contentToCheck = [
            this.taskDescription,
            this.gameRole,
            this.ownerPhone,
            // 根据需要添加其他字段
        ].filter(text => !!text).join(',');

        if (!contentToCheck) return true;

        console.warn("内容安全检查 (checkText API) 需要实现.");
        // 实际调用 checkText API
        // try { ... } catch { ... }
        return true; // 模拟检查通过
    },

    // --- 提交订单 (PL 版本) ---
    async submitOrder() {
      if (!this.validateForm()) return;

      const isContentSafe = await this.checkContent();
      if (!isContentSafe) return;

      uni.showLoading({ title: '正在发布...' });

      // 构建提交数据
      const orderPayload = {
          ...this.formData, // 包含可能的路由传递信息
          boost_type: 'PL', // 陪练类型
          game_name: 'WWQY', // 游戏名
          task_description: this.taskDescription, // 任务描述
          price: parseFloat(this.price),
          time_limit: parseInt(this.time),
          game_role: this.gameRole, // 角色名
          owner_phone: this.ownerPhone, // 号主手机
          security_deposit: Number(this.securityDeposit) || 0,
          efficiency_deposit: Number(this.efficiencyDeposit) || 0,
          // 根据需要动态生成标题
          title: `无畏契约陪练 ${this.taskDescription.substring(0, 10)}...`.trim(),
      };

       // 清理无用或空数据 (可选，类似 DL)
       delete orderPayload.suggestedPrice;
       delete orderPayload.estimatedTime;
       // ... (其他清理逻辑)

      console.log("准备提交的订单数据 (WWQY PL):", orderPayload);
      console.warn("订单提交 API (createOrder) 需要实现.");

      // 模拟 API 调用
      setTimeout(() => {
          uni.hideLoading();
          uni.showToast({ title: '订单发布成功 (模拟)', icon: 'success' });
          // 可跳转
          // uni.redirectTo({ url: '/pages/OrderList/index' });
      }, 1500);

      // 实际 API 调用示例
      // try {
      //     const res = await createOrder(orderPayload);
      //    ... (处理成功/失败)
      // } catch (error) {
      //    ... (处理异常)
      // }
    }
  }
};
</script>
<style scoped>
/* 复用或调整 DL 的样式 */
/* 主要容器 */
.submit-order-container.pl {
     /* PL 特有的顶层样式调整 (如果需要) */
}

.submitOrder {
    width: 100%;
    min-height: 100vh;
    background-color: #eee;
    padding-bottom: 100rpx; /* 避免页脚遮挡 */
}

/* 表单段落样式 (复用 login-mode) */
.login-mode {
    margin-top: 10rpx;
    padding: 40rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.login-mode .tab {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 30rpx; /* 调整间距 */
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;
}

/* PL 任务描述输入框 */
.login-mode input[type="text"][style*="text-align: left;"] {
    text-align: left !important; /* 确保左对齐 */
    border: 1rpx solid #eee;
    padding: 15rpx 20rpx;
    font-size: 14px;
    border-radius: 8rpx;
    width: 100%;
    box-sizing: border-box; /* 包含 padding 和 border */
}

/* 表单行样式 (复用 username/phone) */
.login-mode .username,
.login-mode .phone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    padding: 10rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    font-size: 14px;
}
.login-mode .username:last-child,
.login-mode .phone:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.login-mode .label {
    width: auto;
    flex-shrink: 0;
    margin-right: 20rpx;
    color: #333;
}

.login-mode .handle {
     flex-grow: 1;
     display: flex;
     justify-content: flex-end;
     align-items: center; /* 垂直居中 input 和单位 */
}

.login-mode input[type="text"],
.login-mode input[type="number"] {
    text-align: right;
    font-size: 14px;
    color: #333;
    width: 100%; /* input 占据 handle 的全部宽度 */
    border: none; /* 移除默认边框 */
    background: none;
}

.login-mode input::placeholder {
     color: #aaa;
}
/* 为价格和时间输入框后的单位添加间距 */
.login-mode .username .handle + span,
.login-mode .phone .handle + span {
    margin-left: 10rpx;
    color: #666;
}

/* 特殊任务行样式 (复用 special-task) */
.special-task {
    margin-top: 10rpx;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
}

.special-task .label {
    font-size: 15px;
    color: #333;
}

.special-task .handle {
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.selected-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 50rpx;
    font-size: 14px;
    color: #666;
}

.selected-tag image {
    width: 24rpx;
    height: 24rpx;
    margin-left: 10rpx;
}

/* 页脚样式 (复用 footer) */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 86rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #57b1ff;
    cursor: pointer;
}
.footer .button {
    /* 如果 button 是 div, 需要设置宽度等 */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer .button:active {
    background-color: #4a9cec;
}

/* 弹窗样式 (复用 DL 的) */
.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
}

.popup-content .title {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 30rpx 20rpx 20rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
}

.server,
.order-require {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20rpx 40rpx 40rpx;
    box-sizing: border-box;
}

.server-title,
.order-require-title {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 20rpx;
    margin-bottom: 10rpx;
    border-bottom: 1rpx solid #f0f0f0;
}

.server-content,
.order-require-content {
    max-height: 300rpx; /* 限制高度 */
    /* overflow-y: auto;  -> 应用在 scroll-view */
    padding: 0 10rpx;
    box-sizing: border-box;
}
/* Style scroll-view for order requirements */
.order-require-content {
     display: block; /* Ensure scroll-view is block */
     width: 100%;
     overflow-y: auto; /* Add scroll */
}

.server-content-item,
.order-require-content-item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-top: 15rpx;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}
/* 订单要求项不需要 label/value/unit 结构，调整 */
.order-require-content-item {
    display: block; /* 每条要求占一行 */
    margin-bottom: 10rpx; /* 增加间距 */
}

.server-content-item-text {
    width: 30%;
    flex-shrink: 0;
}

.server-content-item-value {
    color: #333;
    flex-grow: 1;
    margin: 0 10rpx;
}

.server-content-item-value input {
    width: 100%;
    border: 1rpx solid #ddd;
    padding: 5rpx 10rpx;
    border-radius: 5rpx;
    font-size: 13px;
}

.server-content-item-unit {
    text-align: right;
    color: #333;
    width: 50rpx;
    flex-shrink: 0;
}

.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 16px;
    padding: 25rpx;
    color: #fff;
    background: #57b1ff;
    border-top: 1px solid #eee;
    box-sizing: border-box;
    cursor: pointer;
}
.popup-footer:active {
    background-color: #4a9cec;
}
/* 移除 DL 的 popup-footer2 */

</style>